<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="vtc" uri="/vtc-core-tags"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ include file="/common/taglibs.jsp"%>
<html>
<head>
	<title>1st Level Planning</title>
</head>
<body>


<script type="text/javascript">

	$(document).ready(function() {
		validator=$("#mainForm").validate({
			
			rules:{
				"level1Planning.name":{
					maxlength:100
				},
				"level1Planning.remarks":{
					maxlength:1000
				}
			}
		});
	});

	function onPlanYearChange(planYear) {
		
		//Find 'exerciseName' by 'planningExercise', 
		//the value of 'exerciseName' come from a hidden dropdownlist 'planningExerciseTemp'
		$('#planningExerciseTemp').get(0).selectedIndex=$("#planningExercise").get(0).selectedIndex;
		$("#exerciseName").val($('#planningExerciseTemp').val());
		
		if(planYear==null||planYear==""){
			$("#level1PlanningCategory").empty();
			$("#level1PlanningCategory").append("<option value=''>- Select -</option>");
			return;
		}
			
		
		$.ajax({
			url : "plan-first!ajaxCategoryList.action?level1Planning.planningExercise="+planYear+"&operator="+$("#operator").val(),
			cache : true,
			dataType : "json",
			async : false,
			success : function(data) {
				$("#level1PlanningCategory").empty();
				$("#level1PlanningCategory").append("<option value=''>- Select -</option>");
				$.each(data, function(i, n) {
					$("#level1PlanningCategory").append(
							"<option value='"+n.code+"'>" + n.desc + "</option>");
				})
			},
			error : function(data) {
				$("#errorMsgSpan").html(data);
			}
		});
	}
	
	function clickBtn(action){
		switch(action){
		case "save":
			$("#mainForm").attr("action","plan-first!save.action");
			break;
			
		case "viewDetail":
			window.location="plan-first-category-item.action?no-decorate&level1PlanningId="
					+$("#level1PlanningId").val()
					+"&operator="+$("#operator").val();
			return;
			
		case "cancel":
			window.location="plan-first.action";
			return;	
			
		case "confirm":
			$("#mainForm").attr("action","plan-first!conifirmForEndorsement.action");
			break;				
			
		}
		
		$("#mainForm").submit();
	}
	
	$(function(){
		$("#mainForm").validate();
		
		var canEdit="<s:property value='level1Planning.status.canEditLevel1'/>";
		var operatorVal=$("#operator").val();
		
		if(operatorVal=="PLANNER"||canEdit=="false"){
			$("#planningExercise").attr("disabled","true");
			$("#level1PlanningName").attr("disabled","true");
			$("#level1PlanningCategory").attr("disabled","true");
			$("#level1PlanningRemarks").attr("disabled","true");
			$("#confirmBtn").hide();
			$("#saveBtn").hide();
		}	
		
	});
</script>

<span class="errorLabel" id="errorMsgSpan"></span>
<s:fielderror></s:fielderror>
<div class="content"> 
    <div class="pageTitle">1st Level Planning </div>
    <div class="form2">
      <s:form id="mainForm" name="mainForm" action="plan-first.action" method="post">
      <s:hidden name="level1Planning.id" id="level1PlanningId"></s:hidden>
      <s:hidden name="operator" id="operator"></s:hidden>
      
      <table cellspacing="0" cellpadding="0" border="0">
        <tbody><tr>
          <td class="sep"><img style="width:180px;" src="../images/spacer.gif"></td>
          <td class="sep sep2"><img src="../images/spacer.gif"></td>
        </tr>
        <tr>
          <td><label class="fLabel">Planning Exercise</label>
            <div class="fField">
	            <s:textfield cssClass="required" cssStyle="width:180px" id="planningExercise" name="level1Planning.planningExercise" disabled="true"/>
            	<s:hidden name="level1Planning.planningExercise"/>
            </div>
            <script>
			var year = "<s:property value='level1Planning.planningExercise' />";
			var toYear = parseInt(year) + 1;
			document.getElementById("planningExercise").value=year+"/"+toYear.toString().substring(2,4);
			</script>
            </td>
          <td><label class="fLabel">Planning Exercise Name</label>
            <div class="fField">
              <input type="text" style="width:310px" value="<s:property value='exerciseName'/>" name="" id="exerciseName" class="inputText" disabled="disabled">
            </div></td>
        </tr>
        
        <tr>
          <td colspan="2"><label class="fLabel">1st Level Plan Name</label>
            <div class="fField">
              <s:textfield name="level1Planning.name" id="level1PlanningName" cssStyle="width:500px" cssClass="required"/>
            </div></td>
        </tr>
                
        <tr>
          <td colspan="2"><label class="fLabel">Branch Name </label>
            <div class="fField">
            	<s:textfield cssClass="required" cssStyle="width:505px" name="level1Planning.category.branchName" disabled="true"/>
                <s:hidden name="level1Planning.category.id" id="level1PlanningCategory"/>
            </div></td>        
        
        </tr>

        <tr>
          <td colspan="2"><label class="fLabel">Remarks</label>
            <div class="fField">
              <s:textarea name="level1Planning.remarks" id="level1PlanningRemarks" cssClass="inputTextarea" cssStyle="width:500px; height:100px"></s:textarea>	
            </div></td>
        </tr>
        
		<s:if test="level1Planning.id!=null">        
		<tr>
           <td><label class="fLabel">Status</label>
             <div class="fField">
               <input type="text" disabled="disabled" style="width:150px" value="<s:property value='level1Planning.status.label'/>" name="status" id="status" class="inputText">
             </div>
           </td>
         </tr> 
         </s:if>        
      </tbody>
      </table>
      <div class="btnSet btnSetTypeA">
        <div class="left">
      	<s:if test="level1Planning.id!=null">
			<div class="button">
               <div class="left">
                 <div class="right">
                   <input type="button" onclick="clickBtn('viewDetail')" value="View Detail" name="" id="" class="inputButton">
                 </div>
               </div>
             </div>    
             
             <div class="button">
               <div class="left">
                 <div class="right">
                 
                        <security:authorize access="hasRole('CONFIRMED_1ST_LEVEL')">
                   <input type="button" onclick="clickBtn('confirm')" value="Confirm and Submit for Endorsement" name="" id="confirmBtn" class="inputButton">
                </security:authorize>
                 </div>
               </div>
             </div>  	
      	</s:if>
      
        
          <div class="button">
            <div class="left">
              <div class="right">
              <security:authorize access="hasRole('PLANNING_1ST_LEVEL_UPDATE')">
                <input type="button" onclick="clickBtn('save')" value="Save" name="" id="saveBtn" class="inputButton">
                </security:authorize>
              </div>
            </div>
          </div>
          <div class="button">
            <div class="left">
              <div class="right">
                <input type="button" onclick="clickBtn('cancel')" value="Cancel" name="" id="" class="inputButton">
              </div>
            </div>
          </div>
        </div>
      </div>
      
      </s:form>
    </div>
    
</div>

</body>
</html>